<!-- 图片||视频展示组件, 如需勾选请查看相册或素材中心方案 -->
<template>
  <div class="imgBox disFlxCC" :style="`width:${width}px;height:${height}px;`">
    <div v-if="showEdit || showDownload || preview || showDelete" class="hoverBox">
      <a-tooltip v-if="showEdit" title="编辑">
        <a-icon type="edit" class="fz-16 _pl-5 _pr-5 colorFFF cup" @click.stop="handEdit" />
      </a-tooltip>
      <a-tooltip v-if="showDownload" title="下载">
        <a-icon type="download" class="fz-16 _pl-5 _pr-5 colorFFF cup" @click.stop="handDownload" />
      </a-tooltip>
      <a-tooltip v-if="preview && type === 'video'" title="播放视频">
        <a-icon type="play-circle" class="fz-16 _pl-5 _pr-5 colorFFF cup" @click.stop="playVideo" />
      </a-tooltip>
      <a-tooltip v-if="preview && type === 'image'" title="预览图片">
        <a-icon type="eye" class="fz-16 _pl-5 _pr-5 colorFFF cup" @click.stop="openViewer" />
      </a-tooltip>
      <a-tooltip v-if="showDelete" title="删除">
        <a-icon type="delete" class="fz-16 _pl-5 _pr-5 colorFFF cup" @click.stop="handDelete" />
      </a-tooltip>
      <a-tooltip v-if="addWarehouse" v-has="'content:warehouse:list'" title="加入素材库">
        <a-icon type="medicine-box" class="fz-16 _pl-5 _pr-5 colorFFF cup" @click.stop="handAddWarehouse" />
      </a-tooltip>
    </div>
    <div class="checkBox">
      <slot name="checked"></slot>
    </div>
    <img
      :style="`max-width:${width}px;max-height:${height}px;`"
      :src="item.coverUrl || item.url"
      @click.stop="handClick"
    />

    <VideoPlay ref="VideoPlay" />
  </div>
</template>

<script>
import VideoPlay from './videoPlay'
import { getFilename } from '@/utils/common'
import { addWarehouse } from '@/api/content/warehouse'

export default {
  components: {
    VideoPlay
  },
  props: {
    item: {
      type: Object,
      required: true,
      default: () => {
        return {
          coverUrl: "", // 封面图, 视频必传, 图片不传默认取url
          url: "" // url为必传
        }
      }
    },
    // image || video
    type: {
      type: String,
      default: 'image'
    },
    // 是否需要预览
    preview: {
      type: Boolean,
      default: false
    },
    // 图片预览数组, 不传默认只预览单张
    previewList: {
      type: Array,
      default: () => []
    },
    // 是否显示删除
    showDelete: {
      type: Boolean,
      default: false
    },
    // 是否显示下载
    showDownload: {
      type: Boolean,
      default: false
    },
    // 是否显示编辑图标
    showEdit: {
      type: Boolean,
      default: false
    },
    // 是否显示加入素材库
    addWarehouse: {
      type: Boolean,
      default: false
    },
    // 容器宽度
    width: {
      type: Number,
      default: 180
    },
    // 容器高度
    height: {
      type: Number,
      default: 180
    },
    // 图片行内样式
    imageStyle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  methods: {
    playVideo() {
      if(!this.item.url){
        this.$message.error('暂无视频播放源');
        return
      }
      this.$refs.VideoPlay.show(this.item.url)
    },
    openViewer() {
      const images = this.previewList.length ? this.previewList : [this.item.url]
      this.$viewerApi({
        options: {
          initialViewIndex: images.indexOf(this.item.url) // 当前打开下标
        },
        images: images
      })
    },
    
    // 下载素材
    handDownload(){
      window.open(this.item.url, '_self')
    },
    // 加入素材库
    handAddWarehouse() {
      const that = this
      let params = {
        groupId: -1,
        fileList: [{
            name: that.item.name || getFilename(that.item.url),
            type: that.type === 'video' ? '0' : '1',
            coverUrl: that.item.coverUrl || that.item.url,
            url: that.item.url
        }]
      }
      addWarehouse(params).then(() => {
        that.$message.success('已成功加入素材库')
      })
    },
    // 删除
    handDelete() {
      this.$emit('delete', this.item)
    },
    // 编辑
    handEdit() {
      this.$emit('edit', this.item)
    },
    // 封面图点击
    handClick() {
      this.$emit('click', this.item)
    },

   
  }
}
</script>

<style lang="less" scoped>
.imgBox {
  background-color: #fafafa;
  position: relative;
  .hoverBox {
    opacity: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  &:hover {
    .hoverBox {
      opacity: 1;
    }
  }
  .checkBox{
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 2;
  }
}
</style>
